<template>
    <div class="app-container">
        <!--      右侧试卷试题          -->
        <el-form ref="form" :model="paperForm" label-width="80px">
            <div class="right">
                <div class="iteminfo"
                     v-if="paperForm.questionCopyDTOMap.questionType0 === undefined ? false : paperForm.questionCopyDTOMap.questionType0[0].questionType === '0' ? true : false " >
                    <div class="itemType">单选题</div>
                    <div class="itemrow" v-for="(q,index) in paperForm.questionCopyDTOMap.questionType0" :id="'q'+q.questionOrder.toString()">
                        <!--                       题干     -->
                        <label>
                            <span v-html="q.questionOrder+'.'+q.questionStems">1.中国共产党党员是中的有共产主义觉悟的先锋战士。中的有共产主义觉悟的先锋战士。中的有共产主义觉悟的先锋战士。
                            中的有共产主义觉悟的先锋战士。中的有共产主义觉悟的先锋战士。中的有共产主义觉悟的先锋战士。中的有共产主义觉悟的先锋战士。</span>
                            <span style="margin-left: 5px;color: #00b7ee">({{q.score}}分)</span>
                        </label>
                        <!--                      选项      -->
                        <!--<div v-for="(o,index) in q.questionOptionList">
                            <input name="Fruit" type="radio" :value="o.optionTag" @change="radioChange" /><label/>
                            <span v-html="o.optionTag+'.'+o.optionContent">A. 选项选项选项选项选项选项选项选项选项</span>
                        </div>-->
                        <div style="margin: 10px 33px 0 -18px;">
                            <el-radio-group v-model="changeArray[q.questionOrder]" >
                                <el-radio style="width: 100%;margin-bottom: 10px;"
                                          v-for="(o,index) in q.questionOptionList"
                                          :key="index"
                                          :label="String.fromCharCode('A'.charCodeAt(0) + index)"
                                ><span v-html="String.fromCharCode('A'.charCodeAt(0) + index)+'.'+o.optionContent">A. 选项选项选项选项选项选项选项选项选项</span></el-radio>
                            </el-radio-group>
                        </div>
                        <!--                        参考解析     -->
                        <div v-if="q.isOpenQuestionParse">
                            <el-link :underline="false">
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="!q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    查看答案<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    隐藏答案<i class="el-icon-arrow-up el-icon--right"></i>
                                </span>
                            </el-link>
                            <div style="margin: 0px;" v-if="q.isQuestionParse">
                                <span>正确答案：</span>
                                <div>
                                    <span v-html="q.standardAnswer"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iteminfo" style="margin-top: 19px;"
                     v-if="paperForm.questionCopyDTOMap.questionType1 === undefined ? false : paperForm.questionCopyDTOMap.questionType1[0].questionType === '1' ? true : false " >
                    <div class="itemType">多选题</div>
                    <div class="itemrow" v-for="(q,index) in paperForm.questionCopyDTOMap.questionType1" :id="'q'+q.questionOrder.toString()">
                        <!--                       题干     -->
                        <label>
                            <span v-html="q.questionOrder+'.'+q.questionStems">1.中国共产党党员是          中的有共产主义觉悟的先锋战士。</span>
                            <span style="margin-left: 5px;color: #00b7ee">({{q.score}}分)</span>
                        </label>
                        <!--                     选项       -->
                        <!-- <div v-for="(o,index) in q.questionOptionList">
                             <input name="Fruit" type="checkbox" :value="o.optionTag" /><label/>
                             <span v-html="o.optionTag+'.'+o.optionContent">A. 选项选项选项选项选项选项选项选项选项选项</span>
                         </div>-->
                        <div style="margin: 10px 33px 0 -18px;">
                            <el-checkbox-group v-model="checkArray[q.questionOrder]">
                                <el-checkbox style="width: 100%;margin-bottom: 10px;"
                                             v-for="(o,index) in q.questionOptionList"
                                             :key="index"
                                             :label="String.fromCharCode('A'.charCodeAt(0) + index)+','+o.optionContent"
                                ><span v-html="String.fromCharCode('A'.charCodeAt(0) + index)+'.'+o.optionContent">A. 选项选项选项选项选项选项选项选项选项</span></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <!--                        参考解析     -->
                        <div v-if="q.isOpenQuestionParse">
                            <el-link :underline="false">
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="!q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    查看答案<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    隐藏答案<i class="el-icon-arrow-up el-icon--right"></i>
                                </span>
                            </el-link>
                            <div style="margin: 0px;" v-if="q.isQuestionParse">
                                <span>正确答案：</span>
                                <div>
                                    <span v-html="q.standardAnswer"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iteminfo" style="margin-top: 19px;"
                     v-if="paperForm.questionCopyDTOMap.questionType2 === undefined ? false : paperForm.questionCopyDTOMap.questionType2[0].questionType === '2' ? true : false " >
                    <div class="itemType">判断题</div>
                    <div class="itemrow" v-for="(q,index) in paperForm.questionCopyDTOMap.questionType2" :id="'q'+q.questionOrder.toString()" >
                        <!--                    题干        -->
                        <label>
                            <span v-html="q.questionOrder+'.'+q.questionStems">1.中国共产党党员是中的有共产主义觉悟的先锋战士。</span>
                            <span style="margin-left: 5px;color: #00b7ee">({{q.score}}分)</span>
                        </label>
                        <!--                     选项       -->
                        <div style="margin: 10px 33px 0 -18px;">
                            <el-radio-group v-model="q.examAnswerPaperDTO.userAnswer" >
                                <el-radio style="width: 100%;margin-bottom: 10px;"
                                          label="0"
                                ><span>正确</span></el-radio>
                                <el-radio style="width: auto;"
                                          label="1"
                                ><span>错误</span></el-radio>
                            </el-radio-group>
                        </div>
                        <!--<div><input name="Fruit" type="radio" value="0" /><label/>正确</div>
                        <div><input name="Fruit" type="radio" value="1" /><label/>错误</div>-->
                        <!--                        参考解析     -->
                        <div v-if="q.isOpenQuestionParse">
                            <el-link :underline="false">
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="!q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    查看答案<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    隐藏答案<i class="el-icon-arrow-up el-icon--right"></i>
                                </span>
                            </el-link>
                            <div style="margin: 0px;" v-if="q.isQuestionParse">
                                <span>正确答案：</span>
                                <div>
                                    <span v-html="q.standardAnswer === '0' ? '正确':'错误' "></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iteminfo" style="margin-top: 19px;"
                     v-if="paperForm.questionCopyDTOMap.questionType3 === undefined ? false : paperForm.questionCopyDTOMap.questionType3[0].questionType === '3' ? true : false " >
                    <div class="itemType">填空题</div>
                    <div class="itemrow" v-for="(q,index) in paperForm.questionCopyDTOMap.questionType3" :id="'q'+q.questionOrder.toString()">
                        <!--                        题干    -->
                        <label>
                            <span v-html="q.questionOrder+'.'+q.questionStems">1.中国共产党党员是  中的有共产主义觉悟的先锋战士。</span>
                            <span style="margin-left: 5px;color: #00b7ee">({{q.score}}分)</span>
                        </label>
                        <!--                        答题栏    -->
                        <div>
                            <input name="Fruit" type="text" class="underlineinput"
                                   v-model="q.examAnswerPaperDTO.answerContent" />
                        </div>
                        <!--                        参考解析     -->
                        <div v-if="q.isOpenQuestionParse">
                            <el-link :underline="false">
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="!q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    查看答案<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    隐藏答案<i class="el-icon-arrow-up el-icon--right"></i>
                                </span>
                            </el-link>
                            <div style="margin: 0px;" v-if="q.isQuestionParse">
                                <span>参考答案：</span>
                                <div>
                                    <span v-html="q.questionParse"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iteminfo" style="margin-top: 19px;"
                     v-if="paperForm.questionCopyDTOMap.questionType4 === undefined ? false : paperForm.questionCopyDTOMap.questionType4[0].questionType === '4' ? true : false " >
                    <div class="itemType">简答题</div>
                    <div class="itemrow" v-for="(q,index) in paperForm.questionCopyDTOMap.questionType4" :id="'q'+q.questionOrder.toString()">
                        <!--                     题干       -->
                        <label>
                            <span v-html="q.questionOrder+'.'+q.questionStems">1.中国共产党党员是  中的有共产主义觉悟的先锋战士。</span>
                            <span style="margin-left: 5px;color: #00b7ee">({{q.score}}分)</span>
                        </label>
                        <!--                   答题栏         -->
                        <div>
                            <input name="Fruit" type="text" class="underlineinput"
                                   v-model="q.examAnswerPaperDTO.answerContent" />
                        </div>
                        <!--                        参考解析     -->
                        <div v-if="q.isOpenQuestionParse">
                            <el-link :underline="false">
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="!q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    查看答案<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    隐藏答案<i class="el-icon-arrow-up el-icon--right"></i>
                                </span>
                            </el-link>
                            <div style="margin: 0px;" v-if="q.isQuestionParse">
                                <span>参考答案：</span>
                                <div>
                                    <span v-html="q.questionParse"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iteminfo" style="margin-top: 19px;"
                     v-if="paperForm.questionCopyDTOMap.questionType5 === undefined ? false : paperForm.questionCopyDTOMap.questionType5[0].questionType === '5' ? true : false " >
                    <div class="itemType">论述题</div>
                    <div class="itemrow" v-for="(q,index) in paperForm.questionCopyDTOMap.questionType5" :id="'q'+q.questionOrder.toString()">
                        <!--                        题干    -->
                        <label>
                            <span v-html="q.questionOrder+'.'+q.questionStems">1.中国共产党党员是    中的有共产主义觉悟的先锋战士。</span>
                            <span style="margin-left: 5px;color: #00b7ee">({{q.score}}分)</span>
                        </label>
                        <!--                        答题栏    -->
                        <div>
                            <input name="Fruit" type="text" class="underlineinput"
                                   v-model="q.examAnswerPaperDTO.answerContent" />
                        </div>
                        <!--                        参考解析     -->
                        <div v-if="q.isOpenQuestionParse">
                            <el-link :underline="false">
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="!q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    查看答案<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    隐藏答案<i class="el-icon-arrow-up el-icon--right"></i>
                                </span>
                            </el-link>
                            <div style="margin: 0px;" v-if="q.isQuestionParse">
                                <span>参考答案：</span>
                                <div>
                                    <span v-html="q.questionParse"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iteminfo" style="margin-top: 19px;"
                     v-if="paperForm.questionCopyDTOMap.questionType6 === undefined ? false : paperForm.questionCopyDTOMap.questionType6[0].questionType === '6' ? true : false " >
                    <div class="itemType">计算题</div>
                    <div class="itemrow" v-for="(q,index) in paperForm.questionCopyDTOMap.questionType6" :id="'q'+q.questionOrder.toString()">
                        <!--                        题干    -->
                        <label>
                            <span v-html="q.questionOrder+'.'+q.questionStems">1.中国共产党党员是  中的有共产主义觉悟的先锋战士。</span>
                            <span style="margin-left: 5px;color: #00b7ee">({{q.score}}分)</span>
                        </label>
                        <!--                       答题栏     -->
                        <div>
                            <input name="Fruit" type="text" class="underlineinput" v-model="q.examAnswerPaperDTO.answerContent"/>
                        </div>
                        <!--                        参考解析     -->
                        <div v-if="q.isOpenQuestionParse">
                            <el-link :underline="false">
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="!q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    查看答案<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <span class="el-dropdown-link" style="color: rgb(76, 123, 244);font-size: 15px;"
                                      v-if="q.isQuestionParse" @click="handlerQuestionParse(q)">
                                    隐藏答案<i class="el-icon-arrow-up el-icon--right"></i>
                                </span>
                            </el-link>
                            <div style="margin: 0px;" v-if="q.isQuestionParse">
                                <span>参考答案：</span>
                                <div>
                                    <span v-html="q.questionParse"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-form>
        <div slot="footer" align="center" class="dialog-footer" style="float: right;margin-top: 20px;">
            <el-button size="mini" @click="cancel">关 闭</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "paperPreviewForm",
        props: {
            // 试卷表单信息
            paperForm: Object,
        },
        data(){
            return{
                // 选项选中
                changeArray: [],
                // 多选框选中
                checkArray: [[]],
            }
        },
        created() {
            // console.log("试卷预览：",this.paperForm);
            //初始化空二维数据存放多选题答案
            if (this.paperForm.questionCopyDTOMap.questionType1 !== undefined) {
                for (let i = 0; i < this.paperForm.questionCopyDTOMap.questionType1.length; i++) {
                    const q = this.paperForm.questionCopyDTOMap.questionType1[i];
                    this.checkArray[q.questionOrder] = new Array();
                }
            }
        },
        methods: {
            // 查看或隐藏正确答案或参考解析
            handlerQuestionParse(q) {
                q.isQuestionParse = !q.isQuestionParse
            },
            cancel(){
                this.$emit("cancelDialog");
            },
        }
    }
</script>

<style scoped>
    /* p标签不换行 */
    /deep/ p{
        display: inline;
    }
    .right{
        /*width: 1120px;*/
        width: auto;
        height: 500px;
        overflow-y: auto;
    }
    .right::-webkit-scrollbar{width:4px}
    .right::-webkit-scrollbar-track{background-color:#ccc;}
    .right::-webkit-scrollbar-thumb{background-color:rgb(179, 176, 176);}
    .infos{
        background: #FFFFFF;
        padding: 30px 0 13px 0;
    }
    .row {
        position: relative;
        width: 89%;
        height: 100%;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .row label{
        height: 17px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }
    .row span{
        height: 18px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
    }
    .iteminfo{
        background: #FFFFFF;
        /*padding: 20px 20px 20px 20px;*/
    }

    .itemType{
        width: 132px;
        height: 37px;
        line-height: 37px;
        background-image: url("~@/assets/others/rectangle.png");
    }
    .itemrow {
        position: relative;
        margin: 0 auto;
        margin: 10px 0;
    }
    .itemrow label{
        height: 24px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        margin: 0 11px;
        /*span{
            color: #0F70E6;
        }*/
    }
    .itemrow div{
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        line-height: 24px;
        margin-top: 20px;
        margin: 16px 33px 0 33px;
        label{
            /*width: 11px;*/
            width: auto;
        }
    }
    .itemrow .underlineinput {
        -webkit-box-ordinal-group: 11;
        order: 10;
        -ms-flex-order: 10;
        outline: none;
        border: none;
        width: 40%;
        padding: 10px 0;
        font-size: 16px;
        border-bottom: 1px solid #d5d5d5;
        text-indent: 10px;
    }
</style>
